package com.example.featuresdk.view

import android.content.res.Configuration
import android.util.Log
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalTextInputService
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.example.featuresdk.R
import com.example.featuresdk.analytics.ScreenAnalytics
import com.example.featuresdk.theme.DemoTheme
import com.example.featuresdk.viewmodel.SearchCommands
import com.example.featuresdk.viewmodel.SearchState
import com.example.featuresdk.viewmodel.SearchViewModel
import kotlinx.coroutines.flow.flow

@Composable
fun HeaderSearchFeatureEntry(){
    FeatureEntry(R.drawable.ic_search, onClick = {
        SearchState.visible.value = true
    })
}

@Composable
fun SearchScreen(){
    if(SearchState.visible.value) {
        FloatUpAnimation(SearchState.visible.value) {
            val uiConstraints =
                SearchScreenConstraints().apply { init(LocalConfiguration.current) }
            val viewModel: SearchViewModel = hiltViewModel()
            ScreenAnalytics(screenName = "SearchScreen") {
                SearchScreen(uiConstraints, viewModel.uiState, viewModel.commands)
            }
        }
    }
}

@Composable
fun SearchScreen(uiConstraints: SearchScreenConstraints, uiState: SearchState, commands: SearchCommands) {
    FullScreen(uiConstraints) {
        AppHeaderContainer(uiConstraints.appHeaderBarHeightDp) {

            Spacer(modifier = Modifier.width(8.dp))
            BasicTextField(value = uiState.keyword.value,
                onValueChange = {
                    uiState.keyword.value = it
                    commands.search(it)
                },
                modifier = Modifier
                    .border(Dp.Hairline, Color.LightGray)
                    .background(Color.White)
                    .width(uiConstraints.searchInputBoxWidthDp.dp)
                    .height(25.dp)
                    .clip(RoundedCornerShape(8.dp)),
                decorationBox = {
                    Row(verticalAlignment = Alignment.CenterVertically){
                        Spacer(modifier = Modifier.width(4.dp))
                        Icon(painter = painterResource(id = R.drawable.ic_search),
                            modifier = Modifier.size(20.dp),
                            contentDescription = "Search")
                        Spacer(modifier = Modifier.width(4.dp))
                        Box(modifier = Modifier.width((uiConstraints.searchInputFieldWidthDp).dp)){
                            it()
                        }
                        Spacer(modifier = Modifier.width(4.dp))
                        if(uiState.keyword.value.isNotEmpty()) {
                            Icon(painter = painterResource(id = R.drawable.ic_remove),
                                modifier = Modifier.size(16.dp).clickable {
                                    uiState.keyword.value = ""
                                },
                                contentDescription = "Clear"
                            )
                        }
                        Spacer(modifier = Modifier.width(2.dp))
                    }
                }
           )

            if(uiState.keyword.value.isEmpty()){
                uiState.results = flow { emit(emptyList()) }
            }

            Spacer(modifier = Modifier.width(8.dp))
            val inputService = LocalTextInputService.current
            Text(text = "Cancel", modifier = Modifier.width(uiConstraints.cancelButtonWidthDp.dp)
                    .clickable {
                        commands.cancel()
                        inputService?.hideSoftwareKeyboard()
                    })

            if(SearchState.visible.value){
                inputService?.showSoftwareKeyboard()
            }
        }

        AppBodyView(bodyHeightDp = {(uiConstraints.appBodyHeightDp + uiConstraints.appBottomBarHeightDp).dp}) {

            val results by uiState.results.collectAsState(initial = emptyList())

            LazyColumn(modifier = Modifier.height(100.dp)) {
                items(results){
                    Text(text = it)
                }
            }
        }
    }
}


@Preview(showBackground = true)
@Composable
fun PreviewSearchScreen(){
    DemoTheme() {
        SearchScreen(SearchScreenConstraints().apply {
            init(Configuration().apply {
                this.screenHeightDp = 250
                this.screenWidthDp = 392
            })
        }, SearchState().apply {
            keyword.value = "hi"
        },object : SearchCommands{})
    }
}
